<template>
  <div>
    <!-- 新增部门 -->
    <el-form
      :model="addForm"
      ref="addFormRef"
      :rules="rules"
      label-position="top"
    >
      <el-form-item label="部门名称" prop="departmentName">
        <el-input
          v-model="addForm.departmentName"
          placeholder="请输入部门名称"
        />
      </el-form-item>
      <el-form-item label="备注">
        <el-input
          v-model="addForm.remark"
          type="textarea"
          :rows="4"
          placeholder="请输入备注"
        />
      </el-form-item>
    </el-form>

    <div class="fixed bottom-2 right-2">
      <el-button @click="handleCancel(0)">取消</el-button>
      <el-button type="primary" :loading="loading" @click="handleSubmit">
        {{ loading ? "提交中..." : "提交" }}
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { handleApiResponse } from "@/utils/request.js";
import { CreateOrganizeDepartment } from "../../../../../../wailsjs/go/api/DeptApi";

onMounted(() => {});

const emit = defineEmits(["handleBack"]);
const props = defineProps({
  departmentParentId: {
    type: Number,
    default: 0,
  },
});

const addFormRef = ref(null);
const addForm = ref({
  departmentName: "",
  parentId: 0,
  remark: "",
});

const loading = ref(false);
const handleSubmit = () => {
  addFormRef.value.validate((valid) => {
    if (!valid) return;
    loading.value = true;
    addForm.value.parentId = props.departmentParentId;

    handleApiResponse(() => CreateOrganizeDepartment(addForm.value)).then(
      (res) => {
        if (res.code == 0) {
          ElMessage.success("添加成功");
          emit("handleBack", 1);
        }
        loading.value = false;
      }
    );
  });
};
const handleCancel = (val = 0) => {
  emit("handleBack", val);
};

const rules = ref({
  departmentName: [
    { required: true, message: "请输入部门名称", trigger: "blur" },
  ],
});
</script>

<style scoped lang="scss">
</style>